// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/forms/form';
@import '~@mozilla-protocol/core/protocol/css/components/forms/field';
@import '~@mozilla-protocol/core/protocol/css/components/forms/button-container';

.send-to-device {
    color: $form-text;
    max-width: 500px;
    @include clearfix;

    &.mzp-t-dark {
        color: $color-white;
    }

    .mzp-c-field {
        padding-bottom: $label-v-spacing;
    }

    .mzp-c-button-container {
        margin-bottom: 0;
    }

    .mzp-c-form-errors {
        @include bidi(((text-align, left, right),));
    }

    .thank-you p {
        background-color: $color-green-30;
        color: $color-ink-80;
        padding: $spacing-sm;
        border-radius: $border-radius-sm;
    }

    .more {
        color: inherit;
    }

    .loading-spinner {
        display: none;
        height: 36px;
        background: url('/media/img/icons/loading.svg') no-repeat center;
    }
}

// horizontal

@media #{$mq-md} {
    @supports (display:grid) {
        .horizontal {
            &.send-to-device {
                max-width: 100%;
            }

            & .send-to-device-form-fields {
                @include grid-column-gap($spacing-lg);
                display: grid;
                grid-template-columns: 1fr min-content;
                grid-template-rows: auto auto;

                &.hidden {
                    display: none;
                }

                .platform-container {
                    grid-column-start: 1;
                    grid-column-end: 3;
                }

                .mzp-c-field {
                    padding-bottom: 0;
                }

                .mzp-c-button-container {
                    display: block; // not flex
                    margin-bottom: 0;

                    // put in fake form label to push button down height of real form label next to it
                    &::before {
                        @include field-label;
                        content: '.';
                        visibility: hidden;
                    }
                }

                .mzp-c-button {
                    min-width: 200px;
                }
            }
        }
    }
}
